/*
 * @Author: xiaosihan 
 * @Date: 2023-08-06 11:47:47 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-11-12 19:18:07
 */


import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./componentSelect.module.less";
import editorStore from "@/editorComponent/editorStore";
import clsx from "clsx";
import textureManager from "@/editorComponent/textureManager";

interface Iprops {
}

//  部位选择器
export default function ComponentSelect() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [componentList, setComponentList] = useState<Array<{ key: string, name: string, icon: string, hover_icon: string }>>([]);

    const [activeComponent, setActiveComponent] = useState(editorStore.activeComponent);

    useEffect(() => autorun(() => {
        const goodsData = toJS(editorStore.goodsData);
        if (goodsData) {
            const componentList = goodsData.component.filter(c => c.enable === true).map(c => {
                return {
                    key: c.key,
                    name: c.name,
                    icon: c.icon,
                    hover_icon: c.hover_icon
                }
            });

            setComponentList(componentList);
        }
    }, { delay: 10 }), []);


    useEffect(() => autorun(() => {
        const { scale } = editorStore;
        if (dom.current) {
            // dom.current.style.left = `calc(30% + 285px - 70px - ${10.24 * scale / 2}px)`;
            // dom.current.style.top = `calc(50% + 56px - ${10.24 * scale / 2}px )`;
            // dom.current.style.maxHeight = `${10.24 * scale}px`;
        }
    }), []);

    useEffect(() => autorun(() => {
        setActiveComponent(editorStore.activeComponent);
    }), []);

    return (
        <div
            ref={dom}
            className={styles.componentSelect}
        >
            {
                componentList.map((c, i) => {
                    const { key } = c;
                    return (
                        <div
                            key={i}
                            className={clsx(styles.componen_item, (activeComponent === c.key) && styles.active)}
                            onClick={() => editorStore.setActiveComponent(c.key)}
                        >
                            <img
                                key={i}
                                className={styles.img}
                                src={c.key === activeComponent ? c.hover_icon : c.icon}
                                alt=""
                            />
                            <span>{c.name}</span>
                        </div>
                    )
                })
            }
        </div>
    );

}